<template>
  <div class="fixed inset-0 bg-black flex justify-center items-start bg-opacity-20" @click="guanbi" v-if="showModal">
    <div class="mt-50px w-150 p-5 flex flex-col shadow bg-zinc-500" @click.stop.prevent>
      <n-input v-model:value="searchText" placeholder="请输入搜索关键字"></n-input>
    </div>
  </div>
</template>

<script setup>
import {useRoute, useRouter} from "vue-router";

const router = useRouter()
const route = useRoute()

const showModal = ref(false)

const searchText=ref("")
const init=()=>{
  showModal.value = true
  // 监听esc按下
  document.addEventListener('keyup', function (e) {
    //此处填写你的业务逻辑便可
    if (e.key === "Escape") {
      doClose()
    }
  })
}
const doClose = ()=>{
  showModal.value = false
  document.removeEventListener('keyup', function (e) {
    //此处填写你的业务逻辑便可
    if (e.key === "Escape") {
      doClose()
    }
  })
}
const reset=()=>{
  console.log("重置数据")
}
// 点击背景关闭
const guanbi=()=>{
  doClose()
}

defineExpose({init,doClose,reset})
</script>

<style scoped>

</style>